<!DOCTYPE html>
<html>
    <head>
        <title>BEX Order on Mobile</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/jquery.mobile-1.3.0-beta.1.css" />
        <link rel="stylesheet" href="css/index.css" />

        <!--Product Category template-->
        <script type="text/template" id="prod-cat-tmpl">
            {{if attributes.category_id != ""}}
            <a href="#details">${ attributes.title }</a>
            {{/if}}
        </script>

        <!--Product Item template-->
        <script type="text/template" id="prod-item-tmpl">
            {{if attributes.stock != ""}}
            <!-- <a href="#"> -->
            <a href="#purchase" data-rel="popup" data-transition="pop" data-position-to="window" title="Purchase item?" id="buyItemBtn" data-theme="c">
            <img src="img/${attributes.image}" id="productimage">
            <h3>${attributes.description}{{if attributes.crashed}}<img src='img/attension.gif' id='attension' name='attension' />{{/if}}</h3>
            <p>${attributes.name}</p>
            <p>Price: <strong>RM${formatPrice(attributes.currprice)}</strong>&nbsp;&nbsp;&nbsp;&nbsp;(Available: <span style="color:blue;">${attributes.stockavailable}</span>)</p>
            </a>
            <!-- <a href="#purchase" data-rel="popup" data-transition="pop" data-position-to="window" title="Purchase item?" id="buyItemBtn" data-theme="c">Buy Item</a> -->
            {{/if}}
        </script>

        <!--Product Item Popup template-->
        <script type="text/template" id="prod-item-popup-tmpl">
            {{if attributes.stock != ""}}
            <h3>Add to Your Order?</h3>
            <image src="img/${attributes.image}" border="1px;">
            <p>
            <strong>${attributes.description}</strong> <br/>
            ${attributes.name} <br/>
            <div data-role="fieldcontain">
            <label for="qty">Qty:</label>
            <input type="number" name="qty" id="qty" value="1"  />
            </div>
            </p>
            <div data-role="controlgroup" data-type="horizontal" >
            <a href="index.html" data-role="button" data-mini="true" data-rel="back" data-inline="true" data-theme="b" class="buy-item-btn">Buy: RM${formatPrice(attributes.currprice)}</a>
            <a href="index.html" data-role="button" data-mini="true" data-rel="back" data-inline="true" class="cancel-item-btn">Cancel</a>
            </div>
            {{/if}}
        </script>

        <!--Order Item template-->
        <script type="text/template" id="order-item-tmpl">
            {{if attributes.stock != ""}}
            <td><image src="img/${attributes.image}" class="basket-item-img"/></td>
            <th>${attributes.description}</th>
            <td>${attributes.name}</td>
            <td class="tbl-price">RM${formatPrice(attributes.currprice)}</td>
            <td><a href="#" data-role="button" data-icon="delete" data-iconpos="notext" id="remove-item-btn">Remove</a></td>
            {{/if}}
        </script>

        <script type="text/template" id="total-price-tmpl">
            <tr class="tbl-price-total-row">
            <td>&nbsp;</td>
            <th>&nbsp;</th>
            <td>&nbsp;</td>
            <td class="tbl-price tbl-price-total">RM${formatPrice(totalPrice)}</td>
            <td>&nbsp;</td>
            </tr>
        </script>

        <!--Basket Button-->
        <script type="text/template" id="basket-btn-tmpl">
            <a href="#basket" class="ui-btn-right" id="basket-btn">Order: RM${formatPrice(price)}</a>
        </script>

        <!--Reset Button-->
        <script type="text/template" id="reset-btn-tmpl">
            <button data-icon="refresh" id="reset-btn">Clear</button>
        </script>

        <!--Submit Button-->
        <script type="text/template" id="submit-btn-tmpl">
            <button data-icon="arrow-d" data-theme="b" id="submit-btn">Proceed</button>
        </script>

        <script type="text/template" id="waiters-tmpl">
            <option value="${waiterid}">${name}</option>
        </script>

    </head>

    <body>

        <!-- Home Page -->

        <div data-role="page" id="home">
            <div data-role="header" class="ui-bar-b" id="home-header">
                <h1>Home</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-filter="true" id="categories"></ul>
            </div>
            <div role="main" class="ui-content" style="text-align: center">
                <label for="select-choice-0" class="select">Waiter</label>
                <select name="select-choice-0" data-inset="true" id="waiters">
                    <option value=""></option>
                    <option value="ACER1">ACER1</option>
                    <option value="ACER2">ACER2</option>
                    <option value="ACER3">ACER3</option>
                </select>
                <label for="tableno" class="select">Table No.</label>
                <select name="tableno" data-inset="true" id="tableno">
                    <option value=""></option>
                    <option value="BO1">BO1</option>
                    <option value="BO2">BO2</option>
                    <option value="BO3">BO3</option>
                    <option value="BO3A">BO3A</option>
                    <option value="BO5">BO5</option>
                    <option value="BO6">BO6</option>
                    <option value="BO7">BO7</option>
                    <option value="BOP1">BOP1</option>
                    <option value="BOP2">BOP2</option>
                    <option value="BOP3">BOP3</option>
                    <option value="OP1">OP1</option>
                    <option value="OP2">OP2</option>
                    <option value="OP3">OP3</option>
                    <option value="OP3A">OP3A</option>
                    <option value="OP5">OP5</option>
                    <option value="OP6">OP6</option>
                    <option value="OP7">OP7</option>
                    <option value="OP8">OP8</option>
                    <option value="OP9">OP9</option>
                    <option value="OP10">OP10</option>
                    <option value="OP11">OP11</option>
                    <option value="OP12">OP12</option>
                    <option value="OP13">OP13</option>
                    <option value="OP13A">OP13A</option>
                    <option value="OP15">OP15</option>
                    <option value="OP16">OP16</option>
                    <option value="OP17">OP17</option>
                    <option value="OP18">OP18</option>
                    <option value="OP19">OP19</option>
                    <option value="OP20">OP20</option>
                    <option value="OP21">OP21</option>
                    <option value="OP22">OP22</option>
                    <option value="OP23">OP23</option>
                    <option value="OP24">OP24</option>
                    <option value="OP25">OP25</option>
                    <option value="SD1">SD1</option>
                    <option value="SD2">SD2</option>
                    <option value="SD3">SD3</option>
                    <option value="SD3A">SD3A</option>
                    <option value="SD5">SD5</option>
                    <option value="SD6">SD6</option>
                    <option value="SD7">SD7</option>
                    <option value="SD8">SD8</option>
                    <option value="SD9">SD9</option>
                    <option value="SD10">SD10</option>
                    <option value="SD11">SD11</option>
                    <option value="SD12">SD12</option>
                </select>
            </div>
        </div>

        <!-- Details Page -->

        <div data-role="page" id="details" >
            <div data-role="header" class="ui-bar-b" id="details-header">
                <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
                <h1>Details</h1>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-split-icon="gear" data-filter="true" id="productList"></ul>

                <!-- Purchase Popup-->
                <div data-role="popup" id="purchase" data-overlay-theme="a" class="ui-content"></div>
            </div>
        </div>

        <!-- Basket Page -->

        <div data-role="page" id="basket">
            <div data-role="header" class="ui-bar-b">
                <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
                <h1>Your Order</h1>
            </div>
            <div data-role="content">
                <table data-role="table" id="beer-table" class="my-custom-breakpoint">
                    <thead>
                        <tr>
                            <th class="th-image" data-priority="4"><abbr title="icon">&nbsp;</abbr></th>
                            <th class="th-description"><abbr title="Description">Description</abbr></th>
                            <th class="th-name"><abbr title="Name">Name</abbr></th>
                            <th class="th-price tbl-price"><abbr title="Item Price">Price</abbr></th>
                            <th class="th-remove" data-priority="5"><abbr title="delete">&nbsp;</abbr></th>
                        </tr>
                    </thead>
                    <tbody id="order-items"></tbody>
                </table>
            </div>
            <div data-role="footer" class="ui-bar ui-bar-e basket-footer">
            </div>

        </div>

        <script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/lib/jquery.mobile-1.3.0-beta.1.min.js"></script>
        <script type="text/javascript" src="js/lib/jquery.tmpl.js" ></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>
        <script type="text/javascript" src="js/lib/underscore.js"></script>
        <script type="text/javascript" src="js/lib/backbone.js"></script>
        <script type="text/javascript" src="js/shopping-cart.js"></script>
    </body>

</html>
